<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>精美时尚的jQuery动态仪表盘插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css"> -->
	<!-- <link rel="stylesheet" type="text/css" href="css/styles.css"> -->
<link rel="stylesheet" href="../../styles/css/instrument-styles.css" />
</head>
<body>
	
		
	
		<div class="GaugeMeter" id="PreviewGaugeMeter_1" data-percent="60" data-prepend="<font style='color:White;font-size:35px;margin-left:-15px'>&ndash;</font>" data-size="188" data-theme="White" data-back="RGBa(0,0,0,.1)" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="2" data-label="Years" data-label_color="#FFF"></div>
		<div class="GaugeMeter" id="PreviewGaugeMeter_2" data-percent="88" data-append="mph" data-size="200" data-theme="White" data-back="RGBa(0,0,0,.1)" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="15" data-label="Speed" data-style="Arch" data-label_color="#FFF"></div>
		<div class="GaugeMeter" id="PreviewGaugeMeter_3" data-percent="100" data-text="<font style='color:White;font-size:35px;letter-spacing:-1px'>1.21</font>" data-append="<font style='color:white'>GW</font>" data-size="200" data-theme="White" data-back="RGBa(0,0,0,.1)" data-width="15" data-label="Mr Fusion" data-style="Semi" data-label_color="#FFF"></div>
		<div class="GaugeMeter" id="PreviewGaugeMeter_4" data-percent="100" data-append="Y" data-size="180" data-theme="White" data-back="RGBa(0,0,0,.1)" data-animate_gauge_colors="1" data-animate_text_colors="1" data-width="15" data-label="Flux Capacitor" data-label_color="#FFF" data-stripe="2"></div>
	

	
	<!-- <script src="js/jquery-2.1.1.min.js"></script>
	<script src="js/jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script> -->
<script src="../../jsplugin/jquery.min.js"></script>
<script src="../../jsplugin/jquery.AshAlom.gaugeMeter-2.0.0.min.js"></script>
	<script>
$(document).ready(function(){
	//GaugeMeter
	$(".GaugeMeter").gaugeMeter();



	// //Format Code
	// $("pre.Code").html(function (index, html) {
	// 	return html.replace(/^(.*)$/mg, "<span class='Line'>$1</span>")
	// });



	//Sticky Table Header
	// var tables = $("table.StickyHeader");
	// tables.each(function(i){
	// 	var table = tables[i];
	// 	var theadClone = $(table).find("thead").clone(true);
	// 	var stickyHeader =  $("<div></div>").addClass("StickyHeader Hide");
	// 	stickyHeader.append($("<table></table")).find("table").append(theadClone);
	// 	$(table).after(stickyHeader);

	// 	var tableHeight = $(table).height();
	// 	var tableWidth = $(table).width() + Number($(table).css("padding-left").replace(/px/ig,"")) + Number($(table).css("padding-right").replace(/px/ig,"")) + Number($(table).css("border-left-width").replace(/px/ig,"")) + Number($(table).css("border-right-width").replace(/px/ig,""));

	// 	var headerCells = $(table).find("thead th");
	// 	var headerCellHeight = $(headerCells[0]).height();

	// 	var no_fixed_support = false;
	// 	if (stickyHeader.css("position") == "Absolute"){
	// 		no_fixed_support = true;
	// 	}

	// 	var stickyHeaderCells = stickyHeader.find("th");
	// 	//stickyHeader.css("width", tableWidth);
	// 	stickyHeader.css("width", "100%");

	// 	/*
	// 	for (i=0; i<headerCells.length; i++) {
	// 		var headerCell = $(headerCells[i]);
	// 		var cellWidth = headerCell.width();
	// 		$(stickyHeaderCells[i]).css("width", cellWidth);
	// 	}
	// 	*/
	// 	var cellWidth = $(headerCells[0]).width() + 1;
	// 	$(stickyHeaderCells[0]).attr("style", "width:" + cellWidth + "px !important");

	// 	var cutoffTop = $(table).offset().top;
	// 	var cutoffBottom = tableHeight + cutoffTop - headerCellHeight;

	// 	$(window).scroll(function(){ 
	// 	var currentPosition = $(window).scrollTop();
	// 		if(currentPosition > cutoffTop && currentPosition < cutoffBottom){
	// 			stickyHeader.removeClass("Hide");
	// 			if (no_fixed_support){
	// 				stickyHeader.css("top", currentPosition + "px");
	// 			}
	// 		}else{
	// 			stickyHeader.addClass("Hide");
	// 		}
	// 	});
	// });



});
</script>
</body>
</html>